<template>
    <div class="template-list" v-loading="loading">
        <!-- 筛选 -->
        <div class="select-type">
            <div class="select-item">
                <span class="input-title">游戏：</span>
                <el-select v-model="gameId" @change="gameChange">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="王者荣耀" :value="1104466820"></el-option>
                    <el-option label="和平精英" :value="1106467070"></el-option>
                </el-select>
            </div>
            <!-- <div class="select-item">
                <span class="input-title">状态：</span>
                <el-select v-model="status" @change="statusChange">
                    <el-option label="全部" :value="-3"></el-option>
                    <el-option label="显示" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                    <el-option label="系统删除" :value="-2"></el-option>
                    <el-option label="用户删除" :value="-1"></el-option>
                </el-select>
            </div> -->
        </div>
        <div class="table-box">
            <el-table @sort-change="sort" :data="tableData" ref="table" border style="width: 100%">
                <el-table-column width="120" label="QQ号">
                    <template slot-scope="scope">
                        <p class="table-btn" @click="goQQDetails(scope.row)"> {{ scope.row.accountNo }}</p>
                    </template>
                </el-table-column>
                <el-table-column width="120" prop="gameName" label="游戏"></el-table-column>
                <el-table-column min-width="120" label="平台/区服">
                    <template slot-scope="scope">
                        <span>{{ scope.row.areaTypeServer }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="worth" min-width="120" label="估值"></el-table-column>
                <el-table-column sortable="custom" prop="sell" min-width="120" label="是否在售">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status && scope.row.status !== 6">
                            <span :style="{'color': [3,4].includes(scope.row.status) && '#67C23A'}">{{ sellStatus[scope.row.status + ''] || '-' }}</span>
                            <span>（{{ scope.row.serveType ? '顾问模式' : '普通模式'}})</span>
                            <span v-if="sellStatus[scope.row.status + ''] && [3,4,5].includes(scope.row.status)">: {{ scope.row.sellPrice || 0}} 元</span>
                        </div>          
                        <div v-else>
                            <span>无</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column sortable="custom" prop="rent" min-width="120" label="是否在租">
                    <template slot-scope="scope">
                        <div v-if="scope.row.renting !== 4">
                            <span :style="{'color': ['-1', '1', '2'].includes(scope.row.renting + '') && '#67C23A'}">{{ rentStatus[scope.row.renting + ''] || '-' }}</span>
                            <span v-if="rentStatus[scope.row.renting + ''] && ['-1', '1', '2', '3'].includes(scope.row.renting + '')">: {{ scope.row.rentPrice || 0}} 元</span>
                        </div>
                        <div v-else>
                            <span>无</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="totalIncomeRmb" min-width="120" label="出租累计收益（元）">
                    <template slot-scope="scope">
                        <span>{{ scope.row.totalIncomeRmb || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" label="首次托管时间">
                    <template slot-scope="scope">
                        <span>{{ _formatDate(scope.row.firstManageTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable prop="managerDay" min-width="150">
                    <template slot="header">
                        <span style="margin-right: 6px">出租托管天数 (天)</span>
                        <el-tooltip placement="top">
                            <span slot="content">
                                当天托管过就计入托管天数
                            </span>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </template>
                    <template slot-scope="scope">
                        <div style="margin-bottom: 5px">{{ scope.row.managerDay || 0 }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="80" prop="skinCount" label="皮肤数"></el-table-column> -->
                <!-- <el-table-column min-width="120" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.manageStatus === 0">待托管</span>
                        <span v-if="scope.row.manageStatus === -1">暂停托管</span>
                        <span v-if="scope.row.manageStatus === -2">注销托管</span>
                        <span v-if="scope.row.manageStatus === 1">已托管</span>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <!-- <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div> -->
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSizes,
            total: 0,
            loading: false,
            gameId: '',
            status: -3,
            // 0已上架  10交易中 20已售出  30未托管 40已下架
            sellStatus: {
                '-2': '已注销',
                '-1': '审核拒绝',
                '0': '待提交',
                '1': '待审核',
                '2': '待上架',
                '3': '已上架',
                '4': '交易中',
                '5': '已售出',
                '6': '未知',
            },
            // 1出租中，2待出租，3暂停出租，4未托管，5注销托管
            rentStatus: {
                '-1': '出借中',
                '1': '出租中',
                '2': '待出租',
                '3': '暂停出租',
                '4': '未托管',
                '5': '注销托管'
            },
            sortButton: 0,
            sortType: 1
        }
    },
    props: ['detail'],
    created () {
        if (this.detail && this.detail.userId) {
            this.getList(this.pageNum)
        }
    },
    methods: {
        // 排序
        sort ({ column, prop, order }) {
            this.sortButton = (prop === 'sell') ? 0 : 1
            this.sortType = (order === 'ascending') ? 1 : 0
            this.getList(1)
        },
        // 状态切换
        statusChange (val) {
          this.status = val
          this.getList(1)
        },
        // 游戏切换
        gameChange (val) {
          this.gameId = val
          this.getList(1)
        },
        // 点击QQ账号 跳转到相应的 租号账号详情
        goQQDetails (item) {
            let path = ''
            let query = {}
            // 出租
            if (item.sell === 0) {
                path = `/wzry/accDetail`
                if (item.gameName === '和平精英') {
                    path = '/hpjy/accManageDetail'
                }
                query = {
                    accountId: item.accountNo,
                    userId: this.detail && this.detail.userId,
                    dataId: item.dataId
                }
            }
            // 售卖
            if (item.sell === 1 || item.sell === 2) {
                path = '/seller/accTradingDetail'
                query = {
                    dataId: item.sellDataId,
                    status: 0,
                    type: 0
                }
            }
            // 购买
            // if (item.sell === 2) {
            //     path = '/seller/tradOrderDetail'
            //     query = {
            //         orderId: item.orderId
            //     }
            // }
            const { href } = this.$router.resolve({
                path,
                query
            })
            window.open(href, '_blank')
        },
        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                // pageNum: pageNum,
                // pageSize: this.pageSize,
                gameId: this.gameId,
                status: '',
                userId: this.detail.userId,
                sortButton: this.sortButton,
                sort: this.sortType,
            }
            let res = await this.$http.get('/user/manageAccounts', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        _formatDate (timestamp) {
            return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
        },
        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },
        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        }
    }
}
</script>

<style lang="scss" scoped>
    .template-list {
        .order-money {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .select-type {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .select-item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    display: inline-block;
                    margin-right: 6px;
                    margin-left: 10px;
                    font-size: 14px;
                    color: #606266;
                    line-height: 40px;
                }
            }
        }
        .template-option-box {
            max-width: 800px;
        }

        .table-box {
            margin: 20px 0;
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .table-btn{
            cursor: pointer;
            color: #409eff;
            font-size: 13px;
            font-weight: 500;
            &:hover{
                text-decoration: underline;
            }
        }
    }
</style>
